/**
 * @author wn
 * @date 2022/11/17 11:49:53
 * @description: 主页 常量数据
 */

import request from '@/utils/request'

import * as echarts from 'echarts'
/**
 * 首页右侧-获取 echarts 数据
 * @returns Promise
 */

export const getEchartsDataOne = () => request('/chartDataOne')

export const getEchartsDataTwo = () => request('/chartDataTwo')

export const getEchartsDataThree = () => request('/chartDataThree')

export const getEchartsDataFour = () => request('/chartDataFour')

// 折线图  echarts 配置
export const echartsLine = {
	// 文字颜色
	// textStyle: { color: '#fff' },
	grid: {
		top: '3%',
		left: '3%',
		bottom: '3%',
		right: '3%',
		containLabel: true, // 坐标轴是否跟随一起偏移
	},
	// 提示框
	tooltip: {
		trigger: 'axis', // 坐标轴触发
		extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);', // 附加阴影样式
		confine: true, // 限制 tooltip在容器内
		axisPointer: {
			type: 'shadow', // hover  区域阴影
		},
		// backgroundColor: '#fff',
		// borderColor: 'none',
		textStyle: {
			color: '#53565C',
		},
	},
	xAxis: {
		type: 'category', // 类目轴
		data: [],
		boundaryGap: false, // 紧贴坐标轴
		axisLine: {
			lineStyle: { color: '#17b3a3' },
		},
		axisLabel: {
			interval: 0,
			color: '#fff',
		},
	},
	yAxis: {
		type: 'value',
		axisLine: {
			lineStyle: { color: '#17b3a3' },
		},
		axisLabel: {
			interval: 0,
			color: '#fff',
		},
	},
	series: [
		{
			type: 'line',
			data: [],
			stack: 'Total', // 堆叠  重合摆放 不然并列
			showSymbol: false, // 将 点去掉
			smooth: true, // 曲线
			emphasis: { focus: 'series' }, // 聚焦当前区域高亮
			// 堆叠区域
			areaStyle: {
				opacity: 0.8,
				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
					{
						offset: 0,
						color: 'rgb(128,255,165)',
					},
					{
						offset: 1,
						color: 'rgb(1,191,236)',
					},
				]),
			},
			// 将折线去掉
			lineStyle: {
				width: 0,
			},
		},
		{
			type: 'line',
			data: [],
			stack: 'Total',
			smooth: true,
			areaStyle: {
				opacity: 0.8,
				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
					{
						offset: 0,
						color: 'rgb(0,221,255)',
					},
					{
						offset: 1,
						color: 'rgb(77,119,255)',
					},
				]),
			},
			lineStyle: {
				width: 0,
			},
		},
		{
			type: 'line',
			data: [],
			stack: 'Total',
			smooth: true,
			areaStyle: {
				opacity: 0.8,
				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
					{
						offset: 0,
						color: 'rgb(55,162,255)',
					},
					{
						offset: 1,
						color: 'rgb(116,21,219)',
					},
				]),
			},
			lineStyle: {
				width: 0,
			},
		},
		{
			type: 'line',
			data: [],
			stack: 'Total',
			smooth: true,
			showSymbol: false,
			areaStyle: {
				opacity: 0.8,
				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
					{
						offset: 0,
						color: 'rgb(255,0,134)',
					},
					{
						offset: 1,
						color: 'rgb(135,0,157)',
					},
				]),
			},
			lineStyle: {
				width: 0,
			},
		},
	],
}
// 柱状图  data:[] 跟随 category
export const echartsBar = {
	// 文字颜色
	// textStyle: { color: '#fff' },
	// 图标整体 偏移
	grid: {
		top: '3%',
		left: '3%',
		bottom: '3%',
		right: '3%',
		containLabel: true, // 坐标轴是否跟随一起偏移
	},
	// 提示框
	tooltip: { trigger: 'axis' },
	xAxis: {
		type: 'value',
		axisLine: {
			lineStyle: { color: '#17b3a3' },
		},
		axisLabel: {
			interval: 0,
			color: '#fff',
		},
	},
	yAxis: {
		type: 'category',
		data: [],
		axisLine: {
			lineStyle: { color: '#17b3a3' },
		},
		axisLabel: {
			interval: 0,
			color: '#fff',
		},
	},
	series: [
		{
			type: 'bar',
			name: '人数',
			data: [],
			itemStyle: {
				normal: {
					// 柱子  圆角  左上右下
					barBorderRadius: [0, 20, 20, 0],
					// 柱子 渐变
					color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
						{
							offset: 0,
							color: '#005eaa',
						},
						{
							offset: 0.5,
							color: '#339ca8',
						},
						{
							offset: 1,
							color: '#cda819',
						},
					]),
				},
			},
		},
	],
}
// 饼状图配置
export const echartsPie = {
	tooltip: { trigger: 'item' },
	// 图例组件   下方导航提示作用
	legend: { top: 'bottom' },
	series: [
		{
			type: 'pie',
			data: [], // { name,value,label:{color:"#fff"} }
			radius: [16, 140], // 圆心空白距离  大饼的半径
			center: ['50%', '45%'], // 饼图 圆心的坐标  X Y
			roseType: 'area', // 玫瑰 状 饼图
			itemStyle: {
				borderRadius: 10, // 边框圆角
				borderWidth: 3, // 间距的宽度
				borderColor: '#ccc', // 背景色
			},
			// label: { color: '#fff' }, // 整体指示字体颜色
		},
	],
	// 不加颜色  有默认颜色
	color: [
		'#0f78f4',
		'#dd536b',
		'#9462e5',
		'#3de1cf',
		'#e1bb22',
		'#39c362',
		'#a6a6a6',
	],
}
// 柱状图  车位
export const echartsBarParking = {
	grid: {
		top: '3%',
		left: '3%',
		bottom: '3%',
		right: '3%',
		containLabel: true,
	},
	tooltip: {
		trigger: 'axis', // 坐标轴触发
		extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);', // 附加阴影样式
		confine: true, // 限制 tooltip在容器内
		axisPointer: {
			type: 'shadow', // hover  区域阴影
		},
		// backgroundColor: '#fff',
		// borderColor: 'none',
		textStyle: {
			color: '#53565C',
		},
	},
	xAxis: {
		type: 'category',
		data: [],
		axisLine: {
			lineStyle: {
				color: '#fff',
			},
		},
		axisLabel: {
			interval: 0,
			color: '#fff',
		},
	},
	yAxis: {
		type: 'value',
		axisLine: {
			lineStyle: {
				color: '#fff',
			},
		},
	},
	series: [
		{
			type: 'bar',
			data: [],
			stack: 'Total',
			label: { show: true }, // 显示 数据
			emphasis: { focus: 'series' },
		},
		{
			type: 'bar',
			data: [],
			stack: 'Total',
			label: { show: true },
			emphasis: { focus: 'series' },
		},
		{
			type: 'bar',
			data: [],
			stack: 'Total',
			label: { show: true },
			emphasis: { focus: 'series' },
		},
	],
	color: ['#39c362', '#23c7c9', '#dd536b', '#b6a2de', '#5ab1ef', '#8d98b3'],
}
